<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>搜索结果</title>
    {% load static %}
    <link rel="icon" href="/favicon.png" type="image/x-icon">
    <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'icon/bootstrap-icons.min.css' %}">    <style>
        .search-header {
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            padding: 20px 0;
        }
        .image-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .image-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .image-card img {
            width: 100%;
            height: 200px;
            object-fit: contain;
        }
        .image-info {
            padding: 15px;
        }
        .image-info h3 {
            font-size: 1.1rem;
            margin-bottom: 5px;
            color: #333;
        }
        .image-info p {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 0;
        }
        .no-results {
            text-align: center;
            padding: 50px;
            color: #666;
            background: white;
            border-radius: 8px;
            margin-top: 20px;
        }
        .sidebar {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .sidebar-title {
            font-size: 1.2rem;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        /* 添加分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }
        .page-item.active .page-link {
            background-color: #6c757d;
            border-color: #6c757d;
        }
        .page-link {
            color: #6c757d;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- 主内容区 -->
            <div class="col-lg-12">
                <div class="search-header">
                    <h2 class="h4">搜索结果</h2>
                    {% if results.paginator.count > 0 %}
                    <p class="text-muted">共找到 {{ results.paginator.count }} 张图片</p>
                    {% endif %}
                </div>

                {% if results %}
                <div class="image-grid">
                    {% for image in results %}
                    <div class="image-card">
                        <a href="{% url 'image_detail' image.id %}">
                            <img src="{{ image.image_file.url }}" alt="{{ image.title }}" class="img-fluid">
                        </a>
                        <div class="image-info">
                            <h3>{{ image.title|default:"无标题" }}</h3>
                            <p>上传者: {{ image.uploader.username }}</p>
                            {% if image.tags.all %}
                            <div class="mt-2">
                                {% for tag in image.tags.all %}
                                <span class="badge bg-secondary me-1">{{ tag.tag.name }}: {{ tag.get_value }}</span>
                                {% endfor %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>

                <!-- 分页控件 -->
{% if results.paginator.num_pages > 1 %}
<nav aria-label="Page navigation">
    <ul class="pagination">
        {% if results.has_previous %}
            <li class="page-item">
                <a class="page-link" href="#" 
                   onclick="event.preventDefault(); submitSearch(1);" 
                   aria-label="First">
                    <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#" 
                   onclick="event.preventDefault(); submitSearch({{ results.previous_page_number }});" 
                   aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
        {% endif %}

        {% for num in results.paginator.page_range %}
            {% if results.number == num %}
                <li class="page-item active"><span class="page-link">{{ num }}</span></li>
            {% elif num > results.number|add:'-3' and num < results.number|add:'3' %}
                <li class="page-item">
                    <a class="page-link" href="#" 
                       onclick="event.preventDefault(); submitSearch({{ num }});">
                        {{ num }}
                    </a>
                </li>
            {% endif %}
        {% endfor %}

        {% if results.has_next %}
            <li class="page-item">
                <a class="page-link" href="#" 
                   onclick="event.preventDefault(); submitSearch({{ results.next_page_number }});" 
                   aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="#" 
                   onclick="event.preventDefault(); submitSearch({{ results.paginator.num_pages }});" 
                   aria-label="Last">
                    <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
            </li>
        {% endif %}
    </ul>
</nav>
{% endif %}

                {% else %}
                <div class="no-results">
                    <i class="bi bi-image" style="font-size: 2rem; color: #ccc;"></i>
                    <p class="mt-3">没有找到符合条件的图片</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</body>
</html>